<template>
  <van-loading v-if="isLoading" />
  <van-icon v-else
            @click="addLikeClick"
            :color="isAttitude===1 ? '#3296fa':'#777'"
            :name="isAttitude===1 ? 'good-job':'good-job-o'" />
</template>
<script>
import { addLike, deleteLike } from '@/api/article'
export default {
  name: 'LikeArticle',
  data () {
    return {
      isLoading: false // 是否加载中
    }
  },
  props: {
    // 文章id
    articleId: {
      type: [Object, String, Number],
      required: true
    },
    // 文章的态度
    isAttitude: { // 1 点赞  0 不喜欢  -1 无态度
      type: [String, Number],
      required: true
    }
  },
  methods: {
    // 点赞、取消点赞
    async addLikeClick () {
      this.isLoading = true
      try {
        // 判断行为
        if (this.isAttitude === 1) { // 是否点赞
          // 点赞了，要取消
          await deleteLike(this.articleId)
        } else {
          // 未点赞，要点赞
          await addLike(this.articleId)
        }
        // 弹框
        this.$toast.success(this.isAttitude === 1 ? '取消成功' : '点赞成功')
        // 更新视图
        this.$emit('update:isAttitude', this.isAttitude === 1 ? -1 : 1)
      } catch (error) {
        console.dir(error)
        if (error.response.status === 401) {
          // 登录失效或者未登录
          if (this.$store.getters.token) this.$store.commit('setUser', {})
          // 提示一下
          this.$toast.fail('请登录')
          // 跳转
          this.$router.push('/login?url=' + this.$route.path)
        } else {
          this.$toast.fail(this.isAttitude === 1 ? '取消失败' : '点赞失败')
        }
      }
      this.isLoading = false
    }
  }
}
</script>

<style>

</style>
